import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Button, Form, Input, Grid, DatePicker, Field, Message } from '@alifd/next';
import { withRouter } from 'react-router-dom';
import PageHead from '../../../../components/PageHead';
import './index.scss';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 20,
  },
};
const formItemLayout2 = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 16,
  },
};
const formItemLayout3 = {
  labelCol: {
    fixedSpan: 10,
  },
  wrapperCol: {
    span: 12,
  },
};
@withRouter
export default class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      NewSupperData: {
        place: '',
      },
    };
  }
  // field = new Field(this);
  handleAddChange = (values) => {
    const data = Object.assign({}, this.state.NewSupperData, values);
    if (data.ope_time) {
      data.ope_time = new Date(data.ope_time).toLocaleDateString();
    }
    if (data.pro_time) {
      data.pro_time = new Date(data.pro_time).toLocaleDateString();
    }
    if (data.bus_time) {
      data.bus_time = new Date(data.bus_time).toLocaleDateString();
    }
    if (data.org_time) {
      data.org_time = new Date(data.org_time).toLocaleDateString();
    }
    this.setState(
      {
        NewSupperData: data,
      }
    );
  }
  // 添加供应商信息
  AddSupperData= () => {
    const data = this.state.NewSupperData;
    service({
      method: 'post',
      url: api.SuperChange,
      params: {
        act: 'add',
      },
      data,
    })
      .then((res) => {
        if (res.data.code == 200) {
          Message.success('添加成功！');
          this.props.history.push('/home');
        } else {
          Message.error('添加失败！');
        }
      });
  }

  //  提交
  handleSubmit= () => {

    this.AddSupperData();
  }
   // 重置
   handleReset= () => {
     history.go(0);
   }

   render() {
     return (
       <div width="100">
        <PageHead title="添加供应商" />
        <IceContainer>
          <Row wrap>
            <Col span="11">
              <Form
                style={styles.form}
                inline
                size="large"
                {...formItemLayout2}
                onChange={this.handleAddChange}
                value={this.state.NewSupperData}
                ref="addForm"
              >
                {/* <FormItem label="供应商ID:" className="formItem" >
                  <span id="supperID">10</span>
                </FormItem> */}
                <FormItem label="地区" className="formItem ">
                  <Input
                    placeholder="请输入地区"
                    id="place"
                    name="place"
                    size="large"
                    className="input"
                  />
                </FormItem>
                <FormItem label="供应商名称" className="formItem purpleStyle" required>
                  <Input
                    placeholder="请输入供应商名称"
                    id="name"
                    name="name"
                    className="input"
                  />
                </FormItem>
                <FormItem label="品牌" className="formItem ">
                  <Input
                    placeholder="请输入品牌名称"
                    id="brand"
                    name="brand"
                    size="large"
                    className="input"
                  />
                </FormItem>
                <FormItem label="联系人" className="formItem " >
                  <Input
                    placeholder="请输入联系人姓名"
                    id="contacts"
                    name="contacts"
                    className="input"
                  />
                </FormItem>
                <FormItem label="通讯地址" className="formItem"  >
                  <Input
                    placeholder="请输入通讯地址"
                    id="address"
                    name="address"
                    className="input"
                  />
                </FormItem>
                <FormItem label="座机" className="formItem" >
                  <Input
                    placeholder="请输入联系座机"
                    id="landline"
                    name="landline"
                  />
                </FormItem>
                <FormItem label="联系人手机" className="formItem" >
                  <Input
                    placeholder="请输入联系人手机"
                    id="mobile"
                    name="mobile"
                  />
                </FormItem>
                <FormItem label="退货联系人" className="formItem">
                  <Input
                    placeholder="请输入退货联系人"
                    id="return_contacts"
                    name="return_contacts"
                  />
                </FormItem>
                <FormItem label="退货手机" className="formItem">
                  <Input
                    placeholder="请输入退货手机号"
                    id="return_mobile"
                    name="return_mobile"
                  />
                </FormItem>
                <FormItem label="退货地区" className="formItem">
                  <Input
                    placeholder="请输入退货地区"
                    id="return_place"
                    name="return_place"
                  />
                </FormItem>
                <FormItem label="退货座机" className="formItem">
                  <Input
                    placeholder="请输入退货座机"
                    id="return_landline"
                    name="return_landline"
                  />
                </FormItem>
                <FormItem
                  label="退货地址"
                  className="formItemAll"
                  {...formItemLayout}
                >
                  <Input
                    placeholder="请输入退货地址"
                    id="return_address"
                    name="return_address"
                    className="input"
                  />
                </FormItem>
                <FormItem label="传真" className="formItem">
                  <Input placeholder="请输入传真" id="fax" name="fax" />
                </FormItem>
                <FormItem label="邮箱" className="formItem">
                  <Input
                    type="eamil"
                    placeholder="请输入邮箱"
                    id="email"
                    name="email"
                  />
                </FormItem>
                <FormItem
                  label="备注1"
                  className="formItemAll"
                  {...formItemLayout}
                >
                  <Input.TextArea
                    placeholder="请输入备注信息"
                    aria-label="TextArea"
                    id="remarks"
                    name="remarks"
                    style={{ height: '122px' }}
                  />
                </FormItem>
                <FormItem
                  label="预留1"
                  className="formItemAll"
                  {...formItemLayout}
                >
                  <Input
                    placeholder=""
                    id="reserve_one"
                    name="reserve_one"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="预留2"
                  className="formItemAll"
                  {...formItemLayout}
                >
                  <Input
                    placeholder=""
                    id="reserve_two"
                    name="reserve_two"
                    className="input"
                  />
                </FormItem>
                <span className="tips">注：*标注为必填项!</span>
              </Form>
            </Col>
            <Col span="2">
              <div style={styles.separator} />
            </Col>
            <Col span="11">
              <h3 className="r-title">医疗器械经营企业资料</h3>
              <Form style={styles.form} inline size="large" className="form2" id="form2" {...formItemLayout3} onChange={this.handleAddChange} >
                <FormItem label=" 企业法人" className="formItemAll" {...formItemLayout3}>
                  <Input placeholder="请输入企业法人姓名" id="esta_person" name="esta_person" className="input" />
                </FormItem>
                <FormItem label="经营场所" className="formItemAll" {...formItemLayout3}>
                  <Input
                    placeholder="经营场所"
                    id="place_bus"
                    name="place_bus"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="纳税人识别号"
                  className="formItemAll"
                >
                  <Input
                    placeholder="请输入纳税人识别号"
                    id="pay_number"
                    name="pay_number"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="经营许可证号"
                  className="formItemAll"
                >
                  <Input
                    placeholder="请输入经营许可证号"
                    id="ope_number"
                    name="ope_number"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="经营许可证有效期至"
                  className="formItemAll"
                >
                  <DatePicker hasClear={false} style={{ width: '100%' }} size="large" id="ope_time" name="ope_time" className="input" />
                </FormItem>
                <FormItem
                  label="生产许可证号"
                  className="formItemAll"
                >
                  <Input
                    placeholder="请输入生产许可证号"
                    id="pro_number"
                    name="pro_number"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="生产许可证有效期至"
                  className="formItemAll"
                >
                  <DatePicker hasClear={false} size="large" style={{ width: '100%' }} id="pro_time" name="pro_time" className="input" />
                </FormItem>
                <FormItem
                  label="营业执证号"
                  className="formItemAll"
                >
                  <Input
                    placeholder="请输入营业执证号"
                    id="bus_number"
                    name="bus_number"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="营业执证有效期至"
                  className="formItemAll"
                >
                  <DatePicker hasClear={false} style={{ width: '100%' }} size="large" id="bus_time" format="YYYY-M-D" name="bus_time" className="input" />
                </FormItem>
                <FormItem
                  label="组织结构代码证号"
                  className="formItemAll"
                >
                  <Input
                    placeholder="请输入组织结构代码证号"
                    id="org_number"
                    name="org_number"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="组织结构代码证有效期至"
                  className="formItemAll"
                >
                  <DatePicker hasClear={false} style={{ width: '100%' }} size="large" id="org_time" name="org_time" className="input" />
                </FormItem>
                <FormItem
                  label="经营范围"
                  className="formItemAll"
                >
                  <Input.TextArea
                    placeholder="一目了然（花镜）  米卡（架）  奥伽（架）"
                    aria-label="TextArea"
                    id="bus_scope"
                    name="bus_scope"
                  />
                </FormItem>
                <FormItem
                  label="预留1"
                  className="formItemAll"
                >
                  <Input
                    placeholder=""
                    id="m_reserve_one"
                    name="m_reserve_one"
                    className="input"
                  />
                </FormItem>
                <FormItem
                  label="预留2"
                  className="formItemAll"
                >
                  <Input
                    placeholder=""
                    id="m_reserve_two"
                    name="m_reserve_two"
                    className="input"
                  />
                </FormItem>
              </Form>
            </Col>
          </Row>
          <Row>
            <Col style={{ textAlign: 'center', marginTop: '20px' }}>
              <Button type="primary" style={{ marginRight: '40px' }} className="sub-btn" id="subBtn" onClick={this.handleSubmit}>保存</Button>
              <Button type="primary" className="cancel-btn" id="cancelBtn" onClick={this.handleReset}>重置</Button>
            </Col>
          </Row>
        </IceContainer>
      </div>
     );
   }
}

const styles = {
  form: {
    backgroundColor: '#fff',
  },
  separator: {
    margin: '0 auto',
    width: '2px',
    height: '100%',
    backgroundColor: '#E6E7EB',
  },
};
